<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="../static/css/common.css" rel="stylesheet">
  <title>汽车列表</title>
</head>
<body style="padding-bottom: 50px; height: auto;">
  <div class="order">
    <div class="order-hd">
        <div class="car-info text-center">
          <div class="car-info-name">别克凯越</div>
          <div class="car-info-cover">
            <img src="../static/images/havel.png" width="240">
          </div>
          <div class="car-info-link"><a href=""><i class="iconfont icon-search3"></i>查看车辆信息</a></div>
          <div class="car-info-type">
            <span><i class="iconfont icon-wancheng"></i> 自动1.6L</span>
            <span><i class="iconfont icon-wancheng"></i> 三厢</span>
            <span><i class="iconfont icon-wancheng"></i> 5座</span>
          </div>
        </div>   
        <div class="car-info-verder">
          <div>
            <span>来自于</span>上汽通用
          </div>
        </div>
        <div class="order-stores flex">
          <div class="order-store flex-3-1">
            <label>取车时间</label>
            <div class="date-picker">
              <div class="date-picker-text">04月02<span>08:00</span></div>
            </div>
          </div>
          <div class="order-duration flex-3-1">
            <p>
              <span>2天</span>
            </p>
          </div>
          <div class="order-store flex-3-1 text-right">
            <label>取车时间</label>
            <div class="date-picker">
              <div class="date-picker-text">04月02<span>08:00</span></div>
            </div>
          </div>
        </div>
        <div class="order-shops flex">
          <div class="order-shop text-ellipse flex-1"><i class="iconfont icon-wxbmingxingdianpu"></i><span>南京秦淮河营地店</span></div>
          <div class="order-shop text-ellipse flex-1"><i class="iconfont icon-wxbmingxingdianpu"></i><span>南京秦淮河营地xxx店</span></div>
        </div>
    </div>
    <div class="order-bd">
        <div class="order-info-group">
          <div class="order-info-item flex" style="margin-right: 20px;">
            <div class="flex-auto">优惠券</div>
            <label class="flex-auto text-right">
              <select id="coupon" style="-webkit-appearance: none; border: none; background-color: white;">
                  <option value="0">请选择优惠券</option>
                  
                    <option value="8701b26f-f3f7-e611-9e73-00101893930e"
                            data-guid="271838f0-3189-11e8-b1c2-00101893930e"
                            data-subcount="1"
                            data-couponvalue="100.0000"
                            data-typename="代金券">100元注册会员券</option>
                
              </select>
            </label>
            <div class="price-option-arrow flex-none iconfont icon-gengduo" style="margin-top: 2px;"></div>
          </div>
        </div>
        <div class="order-info-group">
            <div class="order-info-item flex" style="margin-right: 20px;">
                <div class="flex-auto">支付方式</div>
                <label class="flex-auto text-right">
                    <select id="payType" style="-webkit-appearance: none; border: none; background-color: white;">
                        <option value="0">微信支付</option>
                        <option value="1">储值支付</option>
                    </select>
                </label>
                <div class="price-option-arrow flex-none iconfont icon-gengduo" style="margin-top: 2px;"></div>
            </div>
        </div>
        <div class="order-info-tip">
          <div>温馨提示</div>
          <div>1.首次租车请使用<span>本人信用卡,本人二代有效身份证,本人有效地方驾驶证正副本</span></div>
          <div>2.本订单仅为客户租车预约登记，提交该订单后，客户需要到门店办理具体租车手续，具体权利义务以签署的合同为准</div>
          <div>3.为了您更好的用车请点击查看<a class="show-book-rule" href="javascript:void(0);">退改规则</a></div>
        </div>            
    </div>
    <div class="order-extra">
      <div class="h2"><div>增值服务<a href="javascript:void(0);">详细说明</a></div></div>
      <div class="order-extra-item">
        <div class="order-extra-hd order-extra-must" data-price="0" data-title="基本保险（保额50万）"><i class="iconfont icon-wancheng"></i>基本保险（保额50万）</div>
        <div class="order-extra-bd">保险车辆因意外事故，致使他人遭受人身伤亡或财产的直接损失，50万元以内保险公司核定理赔的100%。</div>
      </div>
      <div class="order-extra-item order-extra-maybe">
        <div class="order-extra-hd" data-price="50" data-total="250" data-days="5" data-title="车上人员责任"><i class="iconfont icon-circle"></i>车上人员责任（自选）<span class="pull-right">￥50/天</span></div>
        <div class="order-extra-bd">如在租赁期间内购买车上人员责任（10万/位*5位），保险车辆发生事故，致使车上人员遭受人身伤亡为保险费用损失。以及为减少损失而支付的必要合理的施救、保护费用，赔付标准以保险公司核定为准且上限不超过10万/位。</div>
      </div>
      <div class="order-extra-item order-extra-maybe">
        <div class="order-extra-hd" data-price="50" data-total="250" data-days="5" data-title="不计免赔"><i class="iconfont icon-circle"></i>不计免赔<span class="pull-right">￥50/天</span></div>
        <div class="order-extra-bd">如在租赁期间内购买不计免赔，则无需承担1500的绝对免赔额。且可免去前挡车窗玻璃破碎造成的需承租方承担的赔偿额。</div>
      </div>            
    </div>
    <div class="order-submit">
      <button type="button" class="btn pull-right order-submit-btn">提交订单</button>
      <div class="order-submit-main">
        <div class="order-submit-prepay">
          <a class="pull-right" href="javascript:void(0)">明细 <i class="iconfont icon-arrowdown"></i></a>
          预付费:<span class="prepay" data-initial="4500" id="prepayTotal">￥4500</span>
        </div>
      </div>
    </div>
    <div class="order-mask"></div>
    <div class="order-detail">
      <div class="order-detail-item">
        <label>车辆租赁费(含基本费)</label>
        <span class="pull-right">￥900*5 = 4500</span>
      </div>
      <div class="order-detail-maybe">
        <label>代金券</label>
        <span class="pull-right">-￥100</span>
      </div>
      <div class="order-detail-maybe">
        <label>车上人员责任</label>
        <span class="pull-right">￥50*5 = 250</span>
      </div> 
      <div class="order-detail-maybe">
        <label>不计免赔</label>
        <span class="pull-right">￥50*5 = 250</span>
      </div>           
    </div>    
  </div>
  <div class="pop pop-close">
    <div class="pop-inner">
      <div class="pop-content">
          <div class="book-rule">
              <h3>一、普通车型退改规则</h3>
              <div class="ruleinfo">
                  <ul>
                      <li>
                          <p class="rule-lgbt">1、适用范围</p>
                          <ol style="color: #eb5c00;">
                              <li>a) 此规则仅限平日适用，春节、国庆等法定节假日请以具体公示的活动页为准；</li>
                              <li>b) 此规则仅限普通车型使用，高端车型请下拉查看具体规则。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">2、订单取消</p>
                          <ol>
                              <li>a) 预订取车时间前48小时外取消订单，预付订单金额将全额退款。</li>
                              <li>b) 预订取车时间前48小时内取消订单，一嗨将收取最低一日日租金作为违约金，剩余已预付的订单金额将全部退还给客户。</li>
                              <li>c）天气不可抗力（比如洪水、地震等自然灾害）导致用户取消订单，不扣除违约金。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">3、订单修改</p>
                          <ol>
                              <li>a) 订单支付完成后，允许修改订单信息；</li>
                              <li>b) 修改后订单金额可能发生变化，若修改后订单金额低于原来订单金额，差价将会在3-5个工作日原路径返还；若修改后订单金额高于原来订单金额，您可选择在线支付或取车时到店支付订单剩余金额。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">4、续租</p>
                          <p>取车后增加租期，视为续租，续租部分按照非预付优惠价计算。</p>
                      </li>
                  </ul>
              </div>
      
              <h3>二、高端车退改规则</h3>
              <div class="ruleinfo">
                  <ul>
                      <li>
                          <p class="rule-lgbt">1、订单取消</p>
                          <ol>
                              <li>a）若在取车前48-72小时取消，收取订单金额的15%作为违约金；</li>
                              <li>b）若在取车前24-48小时取消，收取订单金额的50%作为违约金；</li>
                              <li>c）若在取车前24小时内取消，收取订单金额100%作为违约金；</li>
                              <li>d）天气不可抗力（比如洪水、地震等自然灾害）导致用户取消订单，不扣除违约金。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">2、订单修改</p>
                          <p>订单支付完成后，允许修改订单信息：</p>
                          <ol>
                              <li>a）若在取车前48-72小时修改，收取订单金额的10%作为改签费；</li>
                              <li>b）若在取车前24-48小时修改，收取订单金额的25%作为改签费；</li>
                              <li>c）若在取车前24小时内修改，收取订单金额50%作为改签费；</li>
                              <li>d）天气不可抗力（比如洪水、地震等自然灾害）导致用户修改订单，不扣除改签费。</li>
                          </ol>
                      </li>
                      <li>
                          <p class="rule-lgbt">3、提前还车</p>
                          <p>允许提前还车，但已预付的租金不退。</p>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
      <div class="pop-ft">我知道了</div>
    </div>
  </div>
  <script src="../static/js/jquery.min.js"></script>
  <script src="../static/js/fastclick.js"></script>
  <script src="../static/js/user.js"></script>
    <script>
      $(function(){
          $('#fee-detail').click(function(){
              $('#feeForm').submit();
          });

          $('.order-submit-prepay').on('click', function(event){
            event.preventDefault();
            $(this).find('.iconfont').toggleClass('icon-arrowup icon-arrowdown')
            $('.order-detail').toggleClass('active')
            $('.order-mask').toggle()
          })

          $('.order-extra-item').on('click', function(){
            $(this).find('.iconfont').toggleClass('icon-circle icon-wancheng');
            updateOrderDetail()
          });

          $('#coupon').on('change', updateOrderDetail)

          //更新详情和总价
          function updateOrderDetail(){
            var total = Number($('#prepayTotal').data('initial')); //取预付费初始值
            $('.order-detail-maybe').remove();
          

            if($('#coupon').val() != '0'){
              var $option = $('#coupon option:checked');
              if($option.data('typename') == '折扣券'){
                var zhikou = ((1 - $option.data('couponvalue'))  * total).toFixed(2) //保留2位
                $('.order-detail').append('<div class="order-detail-maybe"><label>优惠券</label><span class="pull-right">-￥' + zhikou +'</span></div>')
                total -= Number(zhikou) //
              }else{
                $('.order-detail').append('<div class="order-detail-maybe"><label>优惠券</label><span class="pull-right">-￥' + $option.data('couponvalue') +'</span></div>')
                total -= Number($option.data('couponvalue')) //减优惠券的值
              }
            }

            $('.order-extra-must .order-extra-hd .icon-wancheng').each(function(){
              var $hd = $(this).parent()
              $('.order-detail').append('<div class="order-detail-maybe"><label>'+$hd.data('title')+'</label><span class="pull-right">+￥'+$hd.data('price')+'*'+$hd.data('days')+' = '+$hd.data('total')+'</span></div>')
              total += Number($hd.data('total')) //加可选增值服务
            })


            $('.order-extra-maybe .order-extra-hd .icon-wancheng').each(function(){
              var $hd = $(this).parent()
              $('.order-detail').append('<div class="order-detail-maybe"><label>'+$hd.data('title')+'</label><span class="pull-right">+￥'+$hd.data('price')+'*'+$hd.data('days')+' = '+$hd.data('total')+'</span></div>')
              total += Number($hd.data('total')) //加可选增值服务
            })

            $('#prepayTotal').html('￥' + total.toFixed(2)) //保留两位小数
          }
      });
  </script>
</body>
</html>